<template>
	<view>
		<public-module></public-module>
		<view class="swiper-wrap">
			<swiper class="swiper" circular>
				<swiper-item class="swiper-img"
					v-for="(item,index) in detailInfo.detailImage&&detailInfo.detailImage.split(',')" :key="index">
					<image class="swiper-img" :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="p-3 relative" style="margin-top: -90rpx;z-index: 99;">
			<view class="p-3 bg-white rounded-20 shadow-sm">
				<view class="flex j-sb a-center">
					<view class="font-38 font-bold mb-2">{{detailInfo.name}}</view>
					<view>
						<u-icon name="star" color="#999" size="20"></u-icon>
						<!-- <u-icon name="star-fill" color="#ff9c00" size="20"></u-icon> -->
					</view>
				</view>
				<view class="text-secondary mb-2" v-if="detailInfo.address">
					<!-- {{detailInfo.city}}
					|
					{{detailInfo.plate}}
					] -->
					{{detailInfo.address}}
				</view>
				<view class="flex j-start mb-2">
					<view class="span-10">
						<view class="text-danger mb-1 font-32">{{detailInfo.amountTotal}}万元/套起</view>
						<view class="text-secondary font-24">售价</view>
					</view>
					<view class="span-10">
						<view class="mb-1 font-32">{{detailInfo.floorSpace}}
							<block v-if="detailInfo.floorSpace&&!detailInfo.floorSpace.includes('㎡')">㎡</block>
						</view>
						<view class="text-secondary font-24">建筑面积</view>
					</view>
				</view>
				<view class="flex j-start mb-1 label border-bottom pb-3 mb-3">
					<text v-for="(tag,intag) in detailInfo.projectTag" :key="intag">{{tag}}</text>
				</view>
				<view class="flex j-start mb-2" v-if="detailInfo.amountUnit">
					<view class="col-5 text-secondary">参考单价</view>
					<view class="text-danger">{{detailInfo.amountUnit}}</view>
				</view>
				<view class="flex j-start  mb-2" v-if="detailInfo.buildingType">
					<view class="col-5 text-secondary">建筑类型</view>
					<view>{{detailInfo.buildingType}}</view>
				</view>
				<view class="flex j-start a-center mb-2" v-if="detailInfo.propertyType">
					<view class="col-5 text-secondary">物业类型</view>
					<view>{{$dictByKey(propertyType,detailInfo.propertyType)}}</view>
				</view>
				<view class="flex j-start  mb-2" v-if="detailInfo.developerName">
					<view class="col-5 text-secondary">开发商</view>
					<view>{{detailInfo.developerName}}</view>
				</view>
				<view class="flex j-start mb-2" v-if="detailInfo.decorationSituation">
					<view class="col-5 text-secondary">装修</view>
					<view>{{detailInfo.decorationSituation}}</view>
				</view>
			</view>

			<view class="bg-white rounded-20 shadow-sm p-3 mt-3">
				<view class="font-bold font-32 mb-3">全部户型</view>
				<scroll-view :scroll-x="true" :scroll-y="false">
					<view class="flex j-start">
						<view class="mr-3" v-for="(item,index) in houseTypeData" :key="item.id">
							<view v-if="item.image" class="huImg border mb-2 hidden" @click="handlePrev(item.image)">
								<u--image mode="aspectFill" :showLoading="true" :src="item.image" width="330rpx"
									height="300rpx" :radius="10">
									<view slot="error" style="font-size: 24rpx;">加载失败</view>
								</u--image>
							</view>
							<view v-if="item.roomS" class="font-bold my-1">{{item.roomS}}室{{item.roomT}}厅{{item.roomW}}卫
							</view>
							<view v-if="item.roomS">{{item.area}}㎡</view>
							<view v-if="item.roomS" class="text-danger font-bold mt-1">{{item.price}}
								<block v-if="item.price&&!item.price.includes('万')">万</block>
								起
							</view>
						</view>
					</view>
				</scroll-view>
			</view>


			<view class="bg-white rounded-20 shadow-sm p-3 mt-3">
				<view class="font-bold font-32 mb-3">周边配套</view>
				<map class="mapView" :latitude="latitude" :longitude="longitude" :markers="markers" :scale="15"
					:show-location="true" :enable-zoom="true" :enable-scroll="true" @tap="bindOpenLoaction">
				</map>
				<view class="flex j-sb a-center mt-3" v-if="propertyListAll.length>0">
					<view v-for="(item, index) in radiosMapTags" :key="index">
						<view @click="radiosMapTagsClick(item)"
							class="flex j-center flex-column a-center h-60 rounded-60 px-3 "
							:class="[item.checked?'bg-primary-light text-primary':'bg-light-secondary text-dark']">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="mt-3">
					<view class="flex j-sb a-center mb-2" v-for="(item,index) in propertyList" :key="index">
						<view class="flex j-start a-center">
							<image src="/static/icon/hd1.png" mode="widthFix" class="svg30"></image>
							<view class="ml-1">{{item.name}}</view>
						</view>
						<view class="text-secondary">直径{{item.distance}}m</view>
					</view>
				</view>
			</view>

			<view class="bg-white rounded-20 shadow-sm p-3 mt-3">
				<view class="font-bold font-32 mb-3">楼盘信息</view>
				<view class="flex j-start a-center mb-2" v-if="detailInfo.deliveryTime">
					<view class="col-5 text-secondary">交房时间</view>
					<view>{{$dateFormat(detailInfo.deliveryTime)}}</view>
				</view>
				<view class="flex j-start a-center mb-2" v-if="detailInfo.ownershipPeriod">
					<view class="col-5 text-secondary">产权年限</view>
					<view>{{detailInfo.ownershipPeriod}}
						<block v-if="detailInfo.ownershipPeriod&&!detailInfo.ownershipPeriod.includes('年')">年</block>
					</view>
				</view>
				<view class="flex j-start a-center mb-2" v-if="detailInfo.propertyManagement">
					<view class="col-5 text-secondary">物业公司</view>
					<view>{{detailInfo.propertyManagement}}</view>
				</view>
				<view class="flex j-start a-center mb-2" v-if="detailInfo.parkingSpaceRatio">
					<view class="col-5 text-secondary">车位比例</view>
					<view>{{detailInfo.parkingSpaceRatio}}</view>
				</view>
				<view class="flex j-start a-center mb-2" v-if="detailInfo.plannedNumber">
					<view class="col-5 text-secondary">规划户数</view>
					<view>{{detailInfo.plannedNumber}}</view>
				</view>
				<view class="flex j-start a-center mb-2" v-if="detailInfo.plotRatio">
					<view class="col-5 text-secondary">容积率</view>
					<view>{{detailInfo.plotRatio}}</view>
				</view>
				<view class="flex j-start a-center mb-2" v-if="detailInfo.greeningRate">
					<view class="col-5 text-secondary">绿化率</view>
					<view>{{detailInfo.greeningRate}}%</view>
				</view>
			</view>
		</view>
		<view class="h-80"></view>
		<view class="h-60"></view>
		<view class="fixed right-0 bottom-0 w-100 bg-white p-3 shadow-lg z-index-100"
			style="border-radius: 20rpx 20rpx 0 0;">
			<view class="flex j-sb a-center">
				<view class="flex j-start a-center">
					<image :src="detailInfo.manageHeadimg" mode="aspectFill" class="svg80 rounded-circle">
					</image>
					<view class="ml-2">
						<view class="font-bold">{{detailInfo.manageName}}</view>
						<view class="font-24 text-secondary">{{detailInfo.name}}</view>
					</view>
				</view>
				<view class="flex j-end a-center flex-1 ml-3">
					<view
						class="h-80 col-5 rounded-15 flex j-center flex-column a-center border border-primary text-primary mr-4"
						@click="handleWatch">
						预约看房</view>
					<view @click="handleCallPhone"
						class="h-80 col-5 rounded-15 flex j-center flex-column a-center bg-primary text-white">电话咨询
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="showPopUp" mode="center" @close="close" :round="10" :closeable="true"
			:safeAreaInsetBottom="false">
			<view class="col-21 p-3">
				<view class="text-center font-32 font-bold mb-4">预约看房</view>
				<input class="h-80 rounded-20 bg-light-secondary mt-3 pl-2" placeholder="姓名" v-model="formData.name" />
				<input class="h-80 rounded-20 bg-light-secondary mt-3 pl-2" placeholder="电话" v-model="formData.phone" />

				<view class="text-center h-80 bg-primary text-white flex j-center a-center mt-4 rounded-20">提交</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		houseDetail,
		houseTypeList,
		houseProperty
	} from '@/api/house.js'
	export default {
		data() {
			return {
				id: '',
				detailInfo: {},
				latitude: '',
				longitude: '',
				markers: [{
					id: 1234567,
					latitude: '',
					longitude: '',
					width: 15,
					height: 28,
				}],
				radiosMapTags: [{
						name: '教育',
						value: 0,
						checked: true
					},
					{
						name: '交通',
						value: 1,
						checked: false
					},
					{
						name: '医疗',
						value: 2,
						checked: false
					},
					{
						name: '生活',
						value: 3,
						checked: false
					},
					{
						name: '休闲',
						value: 4,
						checked: false
					},
				],
				houseTypeData: [],
				propertyList: [],
				propertyListAll: [],
				showPopUp: false,
				formData: {
					name: '',
					phone: ''
				}
			}
		},
		onLoad(op) {
			if (op.id) {
				this.id = op.id;
				this.getDetail();
				this.getHouseTypeList();
				this.getHouseProperty();
			}
		},
		//分享
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.detailInfo.name,
				path: "/pages/index/detail?id=" + this.id,
				imageUrl: this.detailInfo.listImage,
				success: () => {
					console.log('分享成功')
				}
			}
		},
		onShareTimeline() {
			return {
				title: this.detailInfo.name,
				path: "/pages/index/detail?id=" + this.id,
				imageUrl: this.detailInfo.listImage,
				success: () => {

				}

			};
		},
		methods: {
			handleWatch() {
				this.showPopUp = true;
				this.formData.phone = this.userInfo.phone
			},
			close() {
				this.showPopUp = false;
			},
			getDetail() {
				houseDetail({
					id: this.id
				}).then(res => {
					this.detailInfo = res.data;
					this.latitude = Number(res.data.lat);
					this.longitude = Number(res.data.lng);
					this.markers[0].latitude = this.latitude;
					this.markers[0].longitude = this.longitude;
					uni.setNavigationBarTitle({
						title: res.data.name
					})
				})
			},
			getHouseTypeList() {
				houseTypeList({
					propertyId: this.id
				}).then(res => {
					this.houseTypeData = res.data;
				})
			},
			getHouseProperty() {
				this.propertyList = [];
				houseProperty({
					propertyId: this.id
				}).then(res => {
					this.propertyListAll = res.data;
					this.propertyListAll.forEach(i => {
						if (i.category == 0) {
							this.propertyList.push(i)
						}
					})
				})
			},
			handleCallPhone() {
				uni.makePhoneCall({
					phoneNumber: this.detailInfo.managePhone
				});
			},
			handlePrev(url) {
				uni.previewImage({
					current: 0,
					urls: [url],
				});
			},
			radiosMapTagsClick(val) {
				this.radiosMapTags.map((item, index) => {
					item.checked = item.name === val.name ? true : false
				})
				this.propertyList = [];
				this.propertyListAll.forEach(i => {
					if (i.category == val.value) {
						this.propertyList.push(i)
					}
				})
			},
			bindOpenLoaction() {
				uni.openLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					name: this.detailInfo.name,
					address: this.detailInfo.address,
					success: function() {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-wrap {
		width: 100%;
		height: 550rpx;

		.swiper,
		.swiper-img {
			width: 100%;
			height: 100%;
		}
	}

	.label {
		text {
			display: inline-block;
			padding: 6rpx 15rpx;
			font-size: 24rpx;
			margin-right: 20rpx;
			border-radius: 6px;
			color: #fff;

			&:nth-of-type(1) {
				background-color: #12a7f5;
			}

			&:nth-of-type(2) {
				background-color: #FE0002;
			}
		}
	}

	.huImg {
		width: 330rpx;
		height: 300rpx;
		border: 1px solid #eaeaea;
	}

	.mapView {
		height: 250rpx;
		width: 100%;
	}
</style>